<template>
  <div>
    <el-form :inline="true" :model="queryForm">
      <el-form-item label="软件名称">
        <el-input
          v-model="queryForm.softwareName"
          placeholder="软件名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryForm.status" placeholder="状态" clearable>
          <el-option
            v-for="item in appStatus"
            :key="item.valueId"
            :label="item.valueName"
            :value="item.valueId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属平台">
        <el-select
          v-model="queryForm.flatformId"
          placeholder="所属平台"
          clearable
        >
          <el-option
            v-for="item in appFlatforms"
            :key="item.valueId"
            :label="item.valueName"
            :value="item.valueId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="一级分类">
        <el-select
          v-model="queryForm.categoryLevel1"
          placeholder="一级分类"
          clearable
        >
          <el-option
            v-for="item in categories1"
            :key="item.id"
            :label="item.categoryName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          v-model="queryForm.categoryLevel2"
          placeholder="二级分类"
          clearable
        >
          <el-option
            v-for="item in categories2"
            :key="item.id"
            :label="item.categoryName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          v-model="queryForm.categoryLevel3"
          placeholder="三级分类"
          clearable
        >
          <el-option
            v-for="item in categories3"
            :key="item.id"
            :label="item.categoryName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryBySearch">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="apps">
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="softwareName" label="软件名" />
      <el-table-column prop="supportROM" label="支持ROM" />
      <el-table-column prop="softwareSize" label="软件大小（单位：M）" />
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="toDelete(scope.row)"
            >删除</el-button
          >
          <el-button type="text" size="small" @click="toEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[2, 4, 6]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog title="修改App信息" :visible.sync="openEditDiaglog">
      <AppInfoEdit :model="editAppInfo" @model-changed="handleChanged" v-if="openEditDiaglog" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="openEditDiaglog = false">取 消</el-button>
        <el-button type="primary" @click="doEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDictData } from "@/api/dict";
import { getAppCategory } from "@/api/appcategory";
import { getAppInfoBy ,deleteAppInfoBy,updateAppInfo} from "@/api/appinfo";
import AppInfoEdit from "./components/AppInfoEdit";

export default {
  name: "AppInfo",
  components: {AppInfoEdit},
  data() {
    return {
      appStatus: [],
      appFlatforms: [],
      categories1: [],
      categories2: [],
      categories3: [],
      queryForm: {
        softwareName: null,
        status: null,
        flatformId: null,
        categoryLevel1: null,
        categoryLevel2: null,
        categoryLevel3: null,
      },
      apps: [],
      total: 40,
      pageSize: 2,
      pageIndex: 1,
      // 是否打开修改的对话框
      openEditDiaglog:false,
      editAppInfo: {}
    };
  },
  created() {
    this.queryCategories1();
    this.queryStatusDict();
    this.queryFlatformDict();
    this.queryBySearch();
  },
  methods: {
    queryStatusDict() {
      getDictData("APP_STATUS").then((result) => {
        this.appStatus = result.data;
      });
    },
    queryFlatformDict() {
      getDictData("APP_FLATFORM").then((result) => {
        this.appFlatforms = result.data;
      });
    },
    queryCategories1() {
      getAppCategory({}).then((result) => {
        this.categories1 = result.data;
      });
    },
    queryBySearch() {
      this.pageIndex = 1;
      this.queryAppInfo();
    },
    queryAppInfo() {
      // 把分页查询的参数和app查询的参数进行数据的合并
      let params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        ...this.queryForm,
      };
      getAppInfoBy(params).then((result) => {
        this.apps = result.data.list;
        this.total = result.data.total;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      // 重新查询数据
      this.queryAppInfo();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      // 重新查询数据
      this.queryAppInfo();
    },
    toDelete(row) {
      this.$confirm(
        `确定要删除id:${row.id},名字为：${row.softwareName} 的信息吗`
      )
        .then(() => {
          // 发送删除的请求到服务器
          return deleteAppInfoBy(row.id);
        })
        //，删除成功之后，重新获取数据展示
        .then((result) => {
          this.$message.success(result.message);
          this.queryBySearch();
        });
    },
    toEdit(row) {
      // 更改值，显示修改的对话框
      this.editAppInfo = row;
      this.openEditDiaglog = true;
    },
    //当数据被改变时，同步到 editAppInfo中
    handleChanged(obj){
      this.editAppInfo = obj;
    },
    doEdit(){
      // 隐藏修改的对话框
      this.openEditDiaglog = false;
      // 把数据发送到服务器进行修改，修改完成之后，重新查询数据
      updateAppInfo(this.editAppInfo).then((result)=>{
        this.$message.success(result.mean);
        this.queryBySearch();
      });
    }
  },
  watch: {
    "queryForm.categoryLevel1"(newVal) {
      this.queryForm.categoryLevel2 = "";
      if (newVal === "") {
        this.categories2 = [];
        return;
      } else {
        getAppCategory({ parentId: newVal }).then((result) => {
          this.categories2 = result.data;
        });
      }
    },
    "queryForm.categoryLevel2"(newVal) {
      this.queryForm.categoryLevel3 = "";
      if (newVal === "") {
        this.categories3 = [];
        return;
      } else {
        getAppCategory({ parentId: newVal }).then((result) => {
          this.categories3 = result.data;
        });
      }
    },
  },
};
</script>

<style scoped></style>
